export default function RickAuroraWebsite() { const navItems = [ 'Home', 'Properties', 'About Rick', 'Testimonials', 'Contact' ];

const properties = [ { price: '$6.5M', location: 'Los Altos', image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1200&auto=format&fit=crop' }, { price: '$9.2M', location: 'Pebble Beach', image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop' }, { price: '$9.5M', location: 'Pebble Beach', image: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=1200&auto=format&fit=crop' } ];

const testimonials = [ { name: 'Sophia Reynolds', text: 'Rick made the entire luxury home selling process seamless. We received multiple offers within days.' }, { name: 'Michael Carter', text: 'Professional, responsive, and highly experienced. Rick exceeded every expectation we had.' }, { name: 'Daniel Morgan', text: 'The marketing strategy and negotiation skills were outstanding. Highly recommended.' } ];

return ( <div className="min-h-screen bg-white text-slate-800 scroll-smooth"> {/* Header */} <header className="fixed top-0 left-0 w-full z-50 bg-white/95 backdrop-blur-md border-b border-slate-200 shadow-sm"> <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> <div className="flex items-center gap-3"> <div className="w-12 h-12 rounded-xl bg-[#0A2342] text-white flex items-center justify-center font-bold text-2xl shadow-lg"> RA </div>

<div>
          <h1 className="text-xl md:text-2xl font-bold tracking-wide text-[#0A2342]">
            Rick Aurora
          </h1>
          <p className="text-xs uppercase tracking-[3px] text-slate-500">
            Real Estate Broker
          </p>
        </div>
      </div>

      <nav className="hidden lg:flex items-center gap-8">
        {navItems.map((item) => (
          <a
            key={item}
            href={`#${item.toLowerCase().replace(/\s+/g, '-')}`}
            className="font-medium text-slate-700 hover:text-[#0A2342] transition"
          >
            {item}
          </a>
        ))}
      </nav>

      <button className="bg-[#0A2342] hover:bg-[#12386b] text-white px-6 py-3 rounded-full font-semibold shadow-lg transition">
        Free Consultation
      </button>
    </div>
  </header>

  {/* Hero Section */}
  <section
    id="home"
    className="relative min-h-screen flex items-center pt-24"
  >
    <div
      className="absolute inset-0 bg-cover bg-center"
      style={{
        backgroundImage:
          "url('https://images.unsplash.com/photo-1600585154526-990dced4db0d?q=80&w=1800&auto=format&fit=crop')"
      }}
    >
      <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/60 to-[#0A2342]/30"></div>
    </div>

    <div className="relative z-10 max-w-7xl mx-auto px-6 w-full grid lg:grid-cols-2 gap-12 items-center">
      <div>
        <p className="uppercase tracking-[6px] text-[#0A2342] font-semibold mb-5">
          Luxury Real Estate Specialist
        </p>

        <h2 className="text-5xl md:text-7xl font-black leading-tight text-[#0A2342]">
          Sell Your Luxury Home For Top Dollar.
        </h2>

        <p className="mt-8 text-lg md:text-xl text-slate-700 max-w-xl leading-relaxed">
          Expertise, precision and unmatched results in premium real estate.
          Discover a seamless experience designed for elite homeowners.
        </p>

        <div className="mt-10 flex flex-wrap gap-4">
          <button className="bg-[#0A2342] hover:bg-[#12386b] text-white px-8 py-4 rounded-full text-lg font-semibold shadow-xl transition">
            Book A Consultation
          </button>

          <button className="border-2 border-[#0A2342] text-[#0A2342] hover:bg-[#0A2342] hover:text-white px-8 py-4 rounded-full text-lg font-semibold transition">
            View Listings
          </button>
        </div>
      </div>

      <div className="bg-[#0A2342] text-white rounded-3xl p-8 lg:p-10 shadow-2xl max-w-md w-full justify-self-end">
        <h3 className="text-3xl font-bold mb-3">
          Request A Complimentary Property Valuation
        </h3>

        <p className="text-slate-300 mb-8">
          Get expert insights on your property's current market value.
        </p>

        <form className="space-y-5">
          <input
            type="text"
            placeholder="Full Name"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-xl outline-none"
          />

          <input
            type="email"
            placeholder="Email Address"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-xl outline-none"
          />

          <input
            type="text"
            placeholder="Property Address"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-xl outline-none"
          />

          <input
            type="tel"
            placeholder="Phone Number"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-xl outline-none"
          />

          <button
            type="submit"
            className="w-full bg-white text-[#0A2342] hover:bg-slate-200 font-bold py-4 rounded-xl text-lg transition"
          >
            Get Your Home Value
          </button>
        </form>
      </div>
    </div>
  </section>

  {/* Stats */}
  <section className="relative z-20 -mt-20 px-6">
    <div className="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-4 gap-6">
      {[
        ['Over $850M+', 'Closed Sales'],
        ['20+ Years', 'Experience'],
        ['Top 1%', 'Bay Area Broker'],
        ['Luxury', 'Specialist']
      ].map(([title, subtitle]) => (
        <div
          key={title}
          className="bg-white border border-slate-200 rounded-3xl p-8 shadow-xl text-center hover:-translate-y-2 transition"
        >
          <div className="w-16 h-16 mx-auto rounded-2xl bg-[#0A2342] text-white flex items-center justify-center text-2xl font-bold mb-6">
            ★
          </div>

          <h3 className="text-3xl font-black text-[#0A2342]">{title}</h3>
          <p className="mt-3 text-slate-600 font-medium">{subtitle}</p>
        </div>
      ))}
    </div>
  </section>

  {/* Featured Properties */}
  <section id="properties" className="py-28 px-6 bg-slate-50">
    <div className="max-w-7xl mx-auto">
      <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-16">
        <div>
          <p className="uppercase tracking-[5px] text-[#0A2342] font-semibold mb-3">
            Premium Listings
          </p>
          <h2 className="text-5xl font-black text-[#0A2342]">
            Featured Luxury Properties
          </h2>
        </div>

        <button className="bg-[#0A2342] text-white px-7 py-4 rounded-full font-semibold shadow-lg hover:bg-[#12386b] transition">
          Explore All Properties
        </button>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {properties.map((property) => (
          <div
            key={property.price}
            className="bg-white rounded-[30px] overflow-hidden shadow-xl border border-slate-100 hover:-translate-y-2 transition"
          >
            <div className="h-72 overflow-hidden">
              <img
                src={property.image}
                alt={property.location}
                className="w-full h-full object-cover hover:scale-110 transition duration-700"
              />
            </div>

            <div className="p-8">
              <div className="flex items-center justify-between">
                <h3 className="text-3xl font-black text-[#0A2342]">
                  {property.price}
                </h3>
                <span className="bg-[#0A2342] text-white px-4 py-2 rounded-full text-sm font-semibold">
                  Featured
                </span>
              </div>

              <p className="text-slate-600 mt-2 text-lg">
                {property.location}
              </p>

              <button className="mt-8 w-full bg-[#0A2342] hover:bg-[#12386b] text-white py-4 rounded-2xl font-semibold transition">
                View Details
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  {/* About Section */}
  <section id="about-rick" className="py-28 px-6 bg-white">
    <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
      <div className="relative">
        <img
          src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1200&auto=format&fit=crop"
          alt="Rick Aurora"
          className="rounded-[40px] shadow-2xl w-full h-[650px] object-cover"
        />

        <div className="absolute -bottom-8 -right-8 bg-[#0A2342] text-white p-8 rounded-3xl shadow-2xl max-w-xs">
          <h3 className="text-4xl font-black">20+</h3>
          <p className="mt-2 text-slate-300">
            Years delivering elite real estate results.
          </p>
        </div>
      </div>

      <div>
        <p className="uppercase tracking-[5px] text-[#0A2342] font-semibold mb-4">
          About Rick Aurora
        </p>

        <h2 className="text-5xl font-black text-[#0A2342] leading-tight">
          Trusted By Luxury Homeowners Across The Bay Area.
        </h2>

        <p className="mt-8 text-lg leading-relaxed text-slate-700">
          Rick Aurora is a high-performing real estate broker known for delivering premium results with precision, strategy, and world-class client service. With a reputation built on trust and excellence, Rick has helped homeowners maximize their property value while creating a smooth and stress-free experience.
        </p>

        <p className="mt-6 text-lg leading-relaxed text-slate-700">
          From luxury estates to waterfront properties, every listing receives a tailored marketing strategy designed to attract qualified buyers and generate top-dollar offers.
        </p>

        <div className="grid sm:grid-cols-2 gap-6 mt-12">
          {[
            'Luxury Market Expertise',
            'Elite Marketing Strategy',
            'Global Buyer Network',
            'Personalized Client Service'
          ].map((item) => (
            <div
              key={item}
              className="flex items-center gap-4 bg-slate-50 rounded-2xl p-5"
            >
              <div className="w-12 h-12 rounded-full bg-[#0A2342] text-white flex items-center justify-center font-bold">
                ✓
              </div>

              <span className="font-semibold text-slate-800">{item}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  {/* Testimonials */}
  <section id="testimonials" className="py-28 px-6 bg-[#0A2342] text-white">
    <div className="max-w-7xl mx-auto text-center">
      <p className="uppercase tracking-[5px] text-slate-300 font-semibold mb-4">
        Client Testimonials
      </p>

      <h2 className="text-5xl font-black mb-16">
        What Clients Say About Rick
      </h2>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.name}
            className="bg-white/10 border border-white/10 backdrop-blur-md rounded-[30px] p-8 text-left"
          >
            <div className="text-5xl mb-6">“</div>

            <p className="text-slate-200 leading-relaxed text-lg">
              {testimonial.text}
            </p>

            <div className="mt-8">
              <h3 className="text-2xl font-bold">{testimonial.name}</h3>
              <p className="text-slate-400">Luxury Home Seller</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  {/* Contact */}
  <section id="contact" className="py-28 px-6 bg-white">
    <div className="max-w-7xl mx-auto bg-slate-50 rounded-[40px] overflow-hidden shadow-2xl grid lg:grid-cols-2">
      <div className="p-10 lg:p-16">
        <p className="uppercase tracking-[5px] text-[#0A2342] font-semibold mb-4">
          Contact Rick
        </p>

        <h2 className="text-5xl font-black text-[#0A2342] leading-tight">
          Ready To Sell Your Property?
        </h2>

        <p className="mt-6 text-lg text-slate-600 leading-relaxed">
          Schedule a private consultation and discover how Rick can help maximize your home's value.
        </p>

        <div className="mt-10 space-y-5 text-lg">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-[#0A2342] text-white flex items-center justify-center">
              ☎
            </div>
            <span>(555) 123-4567</span>
          </div>

          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-[#0A2342] text-white flex items-center justify-center">
              ✉
            </div>
            <span>rick@rickaurora.com</span>
          </div>

          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-[#0A2342] text-white flex items-center justify-center">
              ⌂
            </div>
            <span>California Luxury Real Estate Group</span>
          </div>
        </div>
      </div>

      <div className="bg-[#0A2342] p-10 lg:p-16 text-white">
        <h3 className="text-4xl font-black mb-8">
          Request Your Home Valuation
        </h3>

        <form className="space-y-5">
          <input
            type="text"
            placeholder="Full Name"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-2xl outline-none"
          />

          <input
            type="email"
            placeholder="Email Address"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-2xl outline-none"
          />

          <textarea
            rows="5"
            placeholder="Tell us about your property"
            className="w-full bg-white text-slate-800 px-5 py-4 rounded-2xl outline-none"
          ></textarea>

          <button className="w-full bg-white text-[#0A2342] py-4 rounded-2xl font-bold text-lg hover:bg-slate-200 transition">
            Submit Request
          </button>
        </form>
      </div>
    </div>
  </section>

  {/* Footer */}
  <footer className="bg-[#07162C] text-white px-6 pt-20 pb-10">
    <div className="max-w-7xl mx-auto grid lg:grid-cols-4 gap-12">
      <div>
        <div className="flex items-center gap-3 mb-6">
          <div className="w-12 h-12 rounded-xl bg-white text-[#0A2342] flex items-center justify-center font-black text-xl">
            RA
          </div>

          <div>
            <h3 className="text-2xl font-black">Rick Aurora</h3>
            <p className="text-slate-400 uppercase tracking-[3px] text-xs">
              Real Estate Broker
            </p>
          </div>
        </div>

        <p className="text-slate-400 leading-relaxed">
          Elevating luxury real estate experiences with precision, trust, and premium marketing strategies.
        </p>
      </div>

      <div>
        <h4 className="text-2xl font-bold mb-6">Quick Links</h4>

        <div className="space-y-4 text-slate-400">
          {navItems.map((item) => (
            <a
              key={item}
              href={`#${item.toLowerCase().replace(/\s+/g, '-')}`}
              className="block hover:text-white transition"
            >
              {item}
            </a>
          ))}
        </div>
      </div>

      <div>
        <h4 className="text-2xl font-bold mb-6">Services</h4>

        <div className="space-y-4 text-slate-400">
          <p>Luxury Property Sales</p>
          <p>Property Valuation</p>
          <p>Real Estate Investment</p>
          <p>Luxury Home Marketing</p>
        </div>
      </div>

      <div>
        <h4 className="text-2xl font-bold mb-6">Contact Info</h4>

        <div className="space-y-4 text-slate-400">
          <p>(555) 123-4567</p>
          <p>rick@rickaurora.com</p>
          <p>CALRE® 01897451</p>
        </div>

        <div className="flex gap-4 mt-8">
          {['F', 'I', 'Y', 'L'].map((social) => (
            <div
              key={social}
              className="w-12 h-12 rounded-full border border-slate-500 flex items-center justify-center hover:bg-white hover:text-[#0A2342] transition cursor-pointer"
            >
              {social}
            </div>
          ))}
        </div>
      </div>
    </div>

    <div className="max-w-7xl mx-auto border-t border-slate-700 mt-16 pt-8 text-center text-slate-500">
      © 2026 Rick Aurora Real Estate Broker. All rights reserved.
    </div>
  </footer>
</div>

); }